<template>
<view class="index">
<view class="user_info">
	
  <view class="user_info_wrap" v-if="userInfo.avatarUrl" >
    <image class="user_bgc" :src="userInfo.avatarUrl"  />
    <view class="info">
      <image class="info_icon" :src="userInfo.avatarUrl" />
      <view class="info_name" >{{userInfo.nickName}}</view>
    </view>
  </view>
	
  <view class="user_login" v-else>
    <navigator url="/pages/login/login">登陆</navigator>
  </view>
</view>
 
 <view class="user_content">
   <view class="user_main">
      <view class="main_his_wrap">
         <navigator >
           <view class="his_num">0</view>
           <view class="his_name">收藏的店铺</view>
         </navigator>
         <navigator url="/pages/collect/collect">
           <view class="his_num">0</view>
           <view class="his_name">收藏的商品</view>
         </navigator>
         <navigator >
           <view class="his_num">0</view>
           <view class="his_name">关注的商品</view>
         </navigator>
         <navigator>
           <view class="his_num">0</view>
           <view class="his_name">我的足迹</view>
         </navigator>
       </view>
       <view class="mian_order_wrap">
         <view class="order_title">我的订单</view>
         <view class="order_content">
           <navigator>
             <view class="iconfont icon-ding_dan"></view>
             <view class="order_name">全部订单</view>
           </navigator>
           <navigator >
             <view class="iconfont icon-fukuantongzhi"></view>
             <view class="order_name">待付款</view>
           </navigator>
           <navigator >
             <view class="iconfont icon-receipt-address"></view>
             <view class="order_name">待收货</view>
           </navigator>
           <navigator>
             <view class="iconfont icon-tuihuotuikuan_dianpu"></view>
             <view class="order_name">退款/退货</view>
           </navigator>
         </view>
       </view>
       <view class="main_address_wrap">收货地址管理</view>
       <view class="main_info_wrap">
         <view class="app_info_item app_info_contact">
           <text>联系客服</text>
           <text>400-618-4000</text>
         </view>
         <navigator class="app_info_item">意见反馈</navigator>
         <view class="app_info_item">关于我们</view>
       </view>
       <view class="main_recommend_wrap">把应用推荐给其他人</view>
     </view>
   </view>
</view>
</template>

<script>
	export default {
	data(){
	    return {
				userInfo: {},
			}
	},
	mounted(){
	  this.userInfo = uni.getStorageSync('userInfo')
		console.log(this.userInfo);
	}
	}
</script>

<style lang="less" >
 .user_info {
   height: 70vw;
   overflow: hidden;
 }
 .user_info .user_info_wrap {
   position: relative;
 }
 .user_info .user_info_wrap .user_bgc {
   height: 70vw;
   filter: blur(10rpx);
	  width: 100vw;
 }
 .user_info .user_info_wrap .info {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 80rpx;
 }
 .user_info .user_info_wrap .info .info_icon {
   height: 170rpx;
   width: 170rpx;
   border-radius: 50%;
 }
 .user_info .user_info_wrap .info .info_name {
   text-align: center;
   margin-top: 20rpx;
   color: #fff;
   font-size: 38rpx;
   font-weight: bold;
 }
 .user_info .user_login {
   position: relative;
   height: 70vw;
   background-color: var(--themeColor);
 }
 .user_info .user_login navigator {
   position: absolute;
   padding: 20rpx 40rpx;
   left: 50%;
   transform: translateX(-50%);
   top: 120rpx;
   border: 6rpx solid #fff;
   border-radius: 10rpx;
   text-align: center;
   color: #fff;
   font-weight: bold;
	 background-color: #adb7c8;
 }
 
 .user_content {
   position: relative;
 }
 .user_content .user_main {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: -30rpx;
   width: 90%;
   padding-bottom: 80rpx;
   color: #666;
 }
 .user_content .user_main .main_his_wrap {
   display: flex;
   text-align: center;
   background-color: #fff;
   padding: 20rpx;
   font-size: 28rpx;
 }
 .user_content .user_main .main_his_wrap navigator {
   flex: 1;
 }
 .user_content .user_main .main_his_wrap navigator .his_num {
   color: var(--themeColor);
 }
 .user_content .user_main .mian_order_wrap {
   margin-top: 30rpx;
   background-color: #fff;
 }
 .user_content .user_main .mian_order_wrap .order_title {
   padding: 20rpx ;
   border-bottom: 2rpx solid #edece8;
 }
 .user_content .user_main .mian_order_wrap .order_content {
   padding: 20rpx ;
   display: flex;
   text-align: center;
 }
 .user_content .user_main .mian_order_wrap .order_content navigator {
   flex: 1;
 }
 .user_content .user_main .mian_order_wrap .order_content navigator .iconfont {
   color: var(--themeColor);
 }
 .user_content .user_main .main_address_wrap {
   margin-top: 30rpx;
   background-color: #fff;
   padding: 20rpx ;
 }
 .user_content .user_main .main_info_wrap {
   margin-top: 30rpx;
   background-color: #fff;
 }
 .user_content .user_main .main_info_wrap .app_info_item {
   padding: 20rpx ;
   border-bottom: 1rpx solid #ccc;
 }
 .user_content .user_main .main_info_wrap .app_info_contact {
   display: flex;
   justify-content: space-between;
 }
 .user_content .user_main .main_recommend_wrap {
   margin-top: 30rpx;
   background-color: #fff;
   padding: 20rpx ;
 }
</style>